<template>
<div class="home-ranking">
  <h2>
    HomeRanking:{{$route.query}}
  </h2>
</div>
</template>

<script setup>
import {useRoute} from 'vue-router'
import {onMounted,watch} from 'vue'

const route=useRoute()

onMounted(()=>{
  console.log('name',route.query.name)
  console.log('age',route.query.age)
})

watch(()=>route.query,(newVal,oldVal)=>{
  console.log("newVal:",newVal)
  console.log("oldVal:",oldVal)
},{
  immediate:true,
  deep:true
})

</script>

<style scoped>

</style>